<template>
  <div style="padding: 20px;">
    <h2 style="padding-left: 100px">添加图书</h2>
    <el-form :inline="true" :model="form" :rules="rules" ref="form" label-width="100px" style="padding-left: 200px">
      <el-form-item label="书名" prop="title">
        <el-input v-model="form.title" placeholder="请输入书名"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="form.author" placeholder="请输入作者"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="press">
        <el-input v-model="form.press" placeholder="请输入出版社"></el-input>
      </el-form-item>
      <el-form-item label="ISBN" prop="isbn">
        <el-input v-model="form.isbn" placeholder="请输入ISBN"></el-input>
      </el-form-item>
      <el-form-item label="出版日期" prop="publishDate">
        <el-date-picker
            v-model="form.publishDate"
            type="date"
            :clearable=false
            placeholder="选择日期"
            :picker-options="pickOptions"
            style="width: 190px">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-input v-model="form.category" placeholder="请输入分类"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="form.description" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="amount">
        <el-input v-model="form.amount" placeholder="请输入数量"></el-input>
      </el-form-item>
    </el-form>

    <div style="text-align: center; margin-top: 30px">
      <el-button type="primary" @click="add" size="medium">添加</el-button>
      <el-button type="danger" @click="reset" size="medium">重置</el-button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "AddBook",
  data() {
    return {
      form: {
        title: '',
        author: '',
        press: '',
        isbn: '',
        publishDate: '',
        category: '',
        description: '',
        amount: ''
      },
      rules: {
        title: [
          {required: true, message: '请输入书名', trigger: 'blur'},
        ],
        author: [
          {required: true, message: '请输入作者', trigger: 'blur'},
        ],
        press: [
          {required: true, message: '请输入出版社', trigger: 'blur'},
        ],
        isbn: [
          {required: true, message: '请输入ISBN', trigger: 'blur'},
        ],
        amount: [
          {required: true, message: '请输入数量', trigger: 'blur'},
        ],
      },
      pickOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    }
  },
  methods: {
    add() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          request.post('/book/add', this.form).then(res => {
            if (res.code === "200") {
              this.$notify.success({title: "", message:'添加成功', position: 'bottom-left'})
              this.$refs["form"].resetFields();
            } else {
              this.$notify.error({title: "", message:res.msg, position: 'bottom-left'});
            }
          })
        }
      })
    },
    reset() {
      this.$refs["form"].resetFields();
    }
  }
}
</script>